@extends('admin::public.base')
<style>
.layui-form-item .layui-input-inline {
        width: auto;
    }

    .viewer img {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        cursor: pointer;
    }

    .layui-row {
        margin-top: 5px;
    }

    .icon-info {
        float: left;
        margin-bottom: 20px;
        width: 117px;
        height: 100px;
        padding-left: 12px;
    }

    .icon-box {
        padding: 10px;
        text-align: center;
        background: #eee;
    }

    .icon-box:hover {
        cursor: pointer;
    }

    .icon-box p {
        font-size: 35px;
        height: 50px;
        width: 100%;
        line-height: 50px;
    }

    .icon-box h1 {
        font-size: 13px;
        height: 30px;
        line-height: 30px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
</style>
@section('content')
    <div class="layui-card">
        <div class="layui-header">
            <div class="layui-card-header layuiadmin-card-header-auto">
                <div class="layui-input-inline">
                    <input type="text" name="filter" value="" id="filter" autocomplete="off" placeholder="请输入图标名称" class="layui-input layui-search">
                </div>
                <div class="layui-input-inline">
                    <button type="submit" class="layui-btn layui-btn-search" onclick="getList(1);">查询</button>
                </div>
                @if (auth('admin')->user()->can('asdfasdnf'))
                    <a class="layui-btn" href="{{ route('admin.icon.create') }}">添 加</a>
                @endif
            </div>
        </div>
        <div class="layui-form">
            <div class="layui-row">
            </div>
            <div id="paging"></div>
        </div>
    </div>
@endsection

@section('script')
<script>
    layui.use(['layer','laypage', 'form'], function () {
        var form = layui.form,
            laypage = layui.laypage,
            layer = layui.layer; //独立版的layer无需执行这一句
        var param = {!!$param!!};
        var page = param.page?param.page:1;
        var limit = param.limit?param.limit:36;
        var count = '{{$count}}';
        window.getList = function(page,limit=36){
            $.ajax({
                type: "GET",
                dataType: "json",
                url: "{{ route('admin.icon.getList') }}",
                data:{
                    page:page,
                    limit:limit,
                    filter:$('#filter').val()
                },
                success: function (data) {
                    if (data.code == 0) {
                        var count = data.count;
                        var list = data.data;
                        var html = "";
                        for(var i=0;i<list.length;i++){
                            html += '<div class="icon-info">';
                            html += '<div class="icon-box" onclick="editFont('+list[i].id+',this)" desc="'+list[i].desc+'" title="'+list[i].name+'">';
                            html += '<p class="fa '+list[i].name+'"></p>';
                            html += '<h1>'+list[i].name+'</h1>';
                            html += '</div></div>';
                        }
                        $('.layui-row').html(html);
                    } else {
                        layer.msg(data.msg);
                    }
                },
                error: function (data) {
                    layer.msg("服务器开小差啦");
                }
            });
        }
        getList(page,limit);//初始化
        //分页完整功能
        laypage.render({
            elem: 'paging'
            ,count: count
            ,limit:limit
            ,layout: [ 'prev', 'page', 'next', 'skip','count','limit']
            ,jump: function(obj){
                page = obj.curr;
                window.getList(obj.curr,obj.limit);
            }
        });
        $("#filter").keypress(function (e) {
            if (e.which == 13) {
                getList(1);
            }
        });
        window.editFont = function (id,obj) {
            var desc = $(obj).attr('desc');
            layer.prompt({
                formType: 0,
                value: desc,
                title: '编辑图标',
                area: ['800px', '350px'] //自定义文本域宽高
            }, function (value, index, elem) {
                $.ajax({
                    type: "PUT",
                    dataType: "json",
                    url: "{{ route('admin.icon.update') }}",
                    data:{
                        id:id,
                        desc:value
                    },
                    success: function (data) {
                        if (data.code == 1) {
                            layer.msg(data.msg, {
                                time: 2000
                            }, function () {
                                console.log(page);
                                getList(page);
                            })
                        } else {
                            layer.msg(data.msg);
                        }
                    },
                    error: function (data) {
                        layer.msg("服务器开小差啦");
                    }
                });
                layer.close(index);
            });
        }
        //删除模块
        window.delUser = function (id) {
            layer.confirm('您确定要删除吗?', { icon: 3, title: '温馨提示', skin: getBodyColor() }, function (index) {
                $.ajax({
                    type: "GET",
                    dataType: "json",
                    url: "{:url('delUser')}?id=" + id,
                    success: function (data) {
                        if (data.code == 0) {
                            layer.msg(data.msg, {
                                time: 2000
                            }, function () {
                                location.href = data.data.url;
                            })
                        } else {
                            layer.msg(data.msg);
                        }
                    },
                    error: function (data) {
                        layer.msg("服务器开小差啦");
                    }
                });
                layer.closeAll();
            });
        }
    })
</script>
@endsection
